<template>
  <div>
    <h3>分页条</h3>
    <button @click="pre()">上一页</button>
    <button :class="{ color: v == current }" v-for="(v, index) in 10" :key="index" @click="btn(v)" :disabled="v == current">{{ v }}</button>
    <button @click="next()">下一页</button>
  </div>
</template>
<script>
export default {
  data() {
      name:'List'
    return {
      current: 6,
    };
  },
  methods: {
    pre() {
      //this就是Vue对象，可以直接修改data中的数据
      this.current--;
      if (this.current <= 1) {
        this.current = 1;
      }
    },
    next() {
      this.current++;
      if (this.current >= 10) {
        this.current = 10;
      }
    },
    btn(a) {
      console.log(a);
      this.current = a;
      sessionStorage.setItem("current", a);
    },
  },
  mounted(){
    if(sessionStorage.getItem("current")) {
      this.current=sessionStorage.getItem("current")
    }
  }
};
</script>
<style scoped>
[v-cloak] {
  display: none;
}
.color {
  background-color: rgb(11, 216, 243);
  color: white;
}
</style>
